Vue.component('v-chart', VueECharts)
new Vue({
    el: '#app',
    data() {
        return {
            isReady: false, //数据是否已经准备好,防止页面闪现大括号{{}}
            activeDialogIndex: '', //模态窗索引
            stat1: {
                chartOption: {}
            },
            dialog2: { //第二个弹出框统计，（企业检查缺陷分析）
                dstat1: {
                    chartOption: {}
                },
                dstat2: {
                    chartOption: {}
                },
                dstat3: {
                    chartOption: {}
                },
                dstat4: {
                    chartOption: {}
                },
            },
            dialog4: { //第4个弹出框统计，（企业抽样检测不合格项目分析）
                dstat1: {
                    chartOption: {}
                },
                dstat2: {
                    chartOption: {}
                }
            },
            dialog5: { //第5个弹出框统计，（企业投诉举报情况分析）
                dstat1: {
                    chartOption: {}
                },
                dstat2: {
                    chartOption: {}
                }
            },
            dialog6: { //第6个弹出框统计，（企业异常/不良反应情况分析）
                dstat1: {
                    chartOption: {}
                },
                dstat2: {
                    chartOption: {}
                }
            }
        }

    },
    created() {
        setTimeout(() => {
            this.isReady = true
        }, 200)
        this.createStat1()

        // this.createDialog4Stat1()
        // this.createDialog4Stat2()
    },
    methods: {
        showDiaLog(index) { //显示弹框
            this.activeDialogIndex = index
        },
        hideDialog() { //隐藏弹窗
            this.activeDialogIndex = ''
        },
        createStat1() { //企业风险类型占比
            var dataList = [{
                value: 41,
                name: '投诉举报'
            }, {
                value: 29,
                name: '不良反应'
            }, {
                value: 18,
                name: '抽样检测'
            }, {
                value: 12,
                name: '监督检查'
            }]
            this.stat1.chartOption = AllOptions.createOption1(dataList)
        },
        createDialog2Stat1() { //历年企业检查缺陷情况
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证', '机构与人员']
            var yearLable = ['2017年', '2018年', '2019年']
            var dataList = [
                [20, 18, 25, 28, 19],
                [30, 28, 35, 38, 29],
                [40, 38, 45, 48, 19]
            ]
            this.dialog2.dstat1.chartOption = AllOptions.createOption2(lableList, yearLable, dataList)
        },
        createDialog2Stat2() { //严重缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证', '机构与人员', '物料与产品']
            var dataList = [20, 18, 25, 28, 19, 20]
            this.dialog2.dstat2.chartOption = AllOptions.createOption3(lableList, dataList, 'rgba(255, 41, 42, 1)')
        },
        createDialog2Stat3() { //主要缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证', '机构与人员', '物料与产品']
            var dataList = [20, 18, 25, 28, 19, 20]
            this.dialog2.dstat3.chartOption = AllOptions.createOption3(lableList, dataList, 'rgba(248, 231, 28, 1)')
        },
        createDialog2Stat4() { //一般缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证', '机构与人员', '物料与产品']
            var dataList = [20, 18, 25, 28, 19, 20]
            this.dialog2.dstat4.chartOption = AllOptions.createOption3(lableList, dataList, 'rgba(16, 211, 91, 1)')
        },
        createDialog4Stat1() { //历年企业抽检不合格项目情况
            var lableList = ['水分', '效价', '装量', '鉴别', '无菌']
            var yearLable = ['2017年', '2018年', '2019年']
            var dataList = [
                [20, 18, 25, 28, 19],
                [30, 28, 35, 38, 29],
                [40, 38, 45, 48, 19]
            ]
            this.dialog4.dstat1.chartOption = AllOptions.createOption2(lableList, yearLable, dataList)
        },
        createDialog4Stat2() { //企业抽样检测不合格项目分析
            var dataList = [

                {
                    name: '含量',
                    value: 18
                },
                {
                    name: '无菌',
                    value: 13
                },
                {
                    name: '性状',
                    value: 8
                },
                {
                    name: '鉴别',
                    value: 7
                },
                {
                    name: '效价',
                    value: 36
                },
            ]
            var colors = ['rgba(232, 147, 8, 1)', 'rgba(50, 67, 238, 1)', 'rgba(255, 41, 42, 1)', 'rgba(46, 170, 72, 1)', 'rgba(175, 19, 254, 1)']
            this.dialog4.dstat2.chartOption = AllOptions.createOption4(dataList, colors)
        },
        createDialog5Stat1() { //历年企业投诉举报情况
            var lableList = ['质量控制与质量保证', '文件管理', '确认与验证', '厂房与设施', '机构与人员']
            var yearLable = ['2017年', '2018年', '2019年']
            var dataList = [
                [20, 18, 25, 28, 19],
                [30, 28, 35, 38, 29],
                [40, 38, 45, 48, 19]
            ]
            this.dialog5.dstat1.chartOption = AllOptions.createOption2(lableList, yearLable, dataList)
        },
        createDialog5Stat2() { //企业投诉举报情况查询
            var dataList = [

                {
                    name: '异常反应',
                    value: 18
                },
                {
                    name: '产品质量',
                    value: 46
                },
                {
                    name: '外包装',
                    value: 36
                }
            ]
            var colors = ['rgba(51, 204, 118, 1)', 'rgba(238, 158, 50, 1)', 'rgba(85, 19, 254, 1)']
            this.dialog5.dstat2.chartOption = AllOptions.createOption4(dataList, colors)
        },
        createDialog6Stat1() { //一般缺陷
            var lableList = ['2014年', '2015年', '2016年', '2017年', '2018年']
            var dataList = [200, 180, 250, 200, 190, 200]
            this.dialog6.dstat1.chartOption = AllOptions.createOption3(lableList, dataList, 'rgba(242, 49, 50, 1)', '例')
        },
        createDialog6Stat2() { //异常/不良反应分析
            var dataList = [{
                    name: '一般异常',
                    value: 18
                },
                {
                    name: '死亡异常',
                    value: 46
                },
                {
                    name: '严重异常',
                    value: 36
                }
            ]
            var colors = ['rgba(51, 204, 118, 1)', 'rgba(238, 158, 50, 1)', 'rgba(85, 19, 254, 1)']
            this.dialog6.dstat2.chartOption = AllOptions.createOption4(dataList, colors)
        },
        showCpDialog(item) { //产品列表弹窗
            this.activeDialogIndex = 1
            this.$nextTick(() => {
                $('#modal1').modal()
            })
        },
        showQxDialog() { //企业检查缺陷分析弹窗
            this.activeDialogIndex = 2
            this.$nextTick(() => {
                $('#modal2').modal()
                this.createDialog2Stat1()
                this.createDialog2Stat2()
                this.createDialog2Stat3()
                this.createDialog2Stat4()
            })
        },
        dstat2Click(item) { //点击严重缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click', item)
            this.activeDialogIndex = 3;
            this.$nextTick(() => {
                $('#modal3').modal()
            })
        },
        dstat3Click(item) { //点击主要缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click', item)
            this.activeDialogIndex = 3;
            this.$nextTick(() => {
                $('#modal3').modal()
            })
        },
        dstat4Click(item) { //点击一般缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click', item)
            this.activeDialogIndex = 3;
            this.$nextTick(() => {
                $('#modal3').modal()
            })
        },
        backDialog() { //关闭弹窗
            $('#modal3').modal('hide');
            $('#modal2').modal('show');
        },
        showCyDialog() { //企业抽样检测不合格项目分析
            this.activeDialogIndex = 4
            this.$nextTick(() => {
                $('#modal4').modal()
                this.createDialog4Stat1()
                this.createDialog4Stat2()
            })
        },
        showTsDialog() { //企业投诉举报情况分析
            this.activeDialogIndex = 5
            this.$nextTick(() => {
                $('#modal5').modal()
                this.createDialog5Stat1()
                this.createDialog5Stat2()
            })
        },
        showYcDialog() { //企业异常/不良反应情况分析
            this.activeDialogIndex = 6
            this.$nextTick(() => {
                $('#modal6').modal()
                this.createDialog6Stat1()
                this.createDialog6Stat2()
            })
        },
        submitForm() {

        },
        exportForm() {

        },
        goBack() {
            window.history.go(-1)
        }
    }
})